import { Menu, Icon } from 'antd';
import React, { Component } from 'react';
import { WeaLeftRightLayout, WeaLocaleProvider } from 'ecCom';
import { routerShape } from 'react-router';

const getLabel = WeaLocaleProvider.getLabel;
class LogCenter extends Component {
  static contextTypes = {
    router: routerShape,
  }
  constructor(props) {
    super(props);
    this.state = {
      canShrink: true,
      showNavList: '',
      contentHeight: '0',
      current: 'loginLog',
    };
    this.onExpand = this.onExpand.bind(this);
    this.changePage = this.changePage.bind(this);
    this.onShrinkLeftMenu = this.onShrinkLeftMenu.bind(this);
    this.onShrink = this.onShrink.bind(this);
  }

  componentDidMount() {
    const height = window.innerHeight;
    /*eslint-disable */
    this.setState({ contentHeight: height });
    /* eslint-enable */
    this.getlocalstorage();
  }

  onShrinkLeftMenu() {
    const LeftRightLayout = document.getElementById('logContent').firstChild;
    const spanTag = document.getElementById('logContent').getElementsByClassName('leftMenu')[0].getElementsByTagName('span');

    if (this.state.canShrink) {
      LeftRightLayout.style.paddingLeft = '60px';
      LeftRightLayout.style.transition = 'all 0.2s linear';
      LeftRightLayout.firstChild.style.width = '60px';
      LeftRightLayout.firstChild.style.marginLeft = '-60px';
      LeftRightLayout.firstChild.style.transition = 'all 0.2s linear';
      for (let span of spanTag) {
        span.style.display = 'none';
        span.parentNode.style.width = '60px';
      }
      this.setState(() => ({ canShrink: false }));
    } else {
      LeftRightLayout.style.paddingLeft = '197px';
      LeftRightLayout.firstChild.style.width = '197px';
      LeftRightLayout.firstChild.style.marginLeft = '-197px';
      for (let span of spanTag) {
        span.style.display = 'inline-block';
        span.parentNode.style.width = '197px';
        span.parentNode.style.transition = 'all 0.2s linear';
      }
      this.setState(() => ({ canShrink: true }));
    }
  }

  changePage(item) {
    this.context.router.push({
      pathname: `/main/odocExchange/Nav/logCenter/${item.key}`,
      query: {},
      state: {},
    });
    localStorage.setItem('logName', item.key);
    this.setState(() => ({ current: item.key }));
    if (!this.state.canShrink) {
      const liTag = document.getElementById('logContent').getElementsByClassName('leftMenu')[0].childNodes;
      for (let li of liTag) {
        li.style.width = '60px';
        li.style.transition = 'all 0.2s linear';
      }
    }
  }
  getlocalstorage() {
    const log = { key: localStorage.getItem('logName') || 'loginLog' };
    this.changePage(log);
  }

  onExpand(e) {
    if (e.domEvent.target.tagName != 'LI') {
      return;
    }
    event.stopImmediatePropagation();
    if (this.state.canShrink) {
      return;
    }

    e.domEvent.target.childNodes[1].style.display = 'inline-block';
    e.domEvent.target.style.width = '197px';
    e.domEvent.target.style.transition = 'all 0.2s linear';
    this.setState(() => ({ showNavList: e.key }));
  }
  onShrink(e) {
    if (e.domEvent.target.tagName != 'LI') {
      return;
    }
    event.stopImmediatePropagation();
    if (this.state.canShrink) {
      return;
    }
    e.domEvent.target.childNodes[1].style.display = 'none';
    e.domEvent.target.style.width = '60px';
    e.domEvent.target.style.transition = 'all 0.2s linear';
    this.setState(() => ({ showNavList: '' }));
  }

  leftContent() {
    return (
      <div style={{ transition: 'all 0.2s linear' }}>
        <div className="scroll" onClick={this.onShrinkLeftMenu}><Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@q5soak`} type="menu-fold" /></div>
        <Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@gy7yq1`} className="leftMenu" onClick={this.changePage} selectedKeys={[this.state.current]} >
          <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@p0i09w`} key="loginLog" onMouseEnter={this.onExpand} onMouseLeave={this.onShrink}><i className="icon-coms-denglurizhi" /><span style={{ display: this.state.canShrink || this.state.showNavList == 'loginLog' ? 'inline-block' : 'none' }} >{getLabel(2059, '登录日志')}</span></Menu.Item>
          <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@3367nq`} key="alterLog" onMouseEnter={this.onExpand} onMouseLeave={this.onShrink}><i className="icon-coms-biangengrizhi" /><span style={{ display: this.state.canShrink || this.state.showNavList == 'alterLog' ? 'inline-block' : 'none' }} >{getLabel(387596, '变更日志')}</span></Menu.Item>
          <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@7w4jki`} key="recPostLog" onMouseEnter={this.onExpand} onMouseLeave={this.onShrink}><i className="icon-coms-shoufawenrizhi" /><span style={{ display: this.state.canShrink || this.state.showNavList == 'recPostLog' ? 'inline-block' : 'none' }}>{getLabel(387598, '收发文日志')}</span></Menu.Item>
        </Menu>
      </div>
    );
  }
  render() {
    return (
      <div id="logContent" style={{ height: this.state.contentHeight - 55, borderBottom: '1px solid #eaeaea' }} >
        <WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@h5tlr9`}
          isNew={true}
          leftWidth={197}
          leftCom={this.leftContent()}
          onCollapse={() => { }}
          style={{ transition: 'all 0.2s linear' }}
        >
          <div className="rightContent" style={{ height: this.state.contentHeight - 75 }}>{this.props.children}</div>
        </WeaLeftRightLayout>
      </div>

    );
  }
}
export default LogCenter;
